<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const tableData = ref([])

const userToken = ref(localStorage.getItem("user-token") ?
    JSON.parse(localStorage.getItem("user-token")) : null);

onMounted(()=> {
  if (userToken.value == null) {
    alert("请先登录!");
    router.push("/patient/login");
    return;
  }
  axios.defaults.headers.common['Authorization'] = userToken.value;
  getSchedule(currentPage.value);
})
const getSchedule = (pageNum) => {
  axios.get(BASE_URL+"/v1/schedules/selectAll/pageNum="+pageNum).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data.list;
      total.value = response.data.data.maxPage;
    }
  })
}

const userName = ref();

const getScheduleByNickname = ()=>{
  if (userName.value==null||userName.value===''){
    getSchedule(currentPage.value);
    ElMessage.error('请输入患者姓名!')
    return;
  }
  axios.get(BASE_URL+'/v1/schedules/selectByNickname/'+userName.value).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data;
    }else ElMessage.error(response.data.message);
  })
}

const searchToday=()=>{
  if (confirm('您确定要查询当天的预约吗?')){
    axios.get(BASE_URL+'/v1/schedules/searchToday/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
      }
    })
  }
}
const searchLastWeek=()=>{
  if (confirm('您确定要查询7天内的预约吗?')){
    axios.get(BASE_URL+'/v1/schedules/searchLastWeek/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
      }
    })
  }
}
const searchLastMonth=()=>{
  if (confirm('您确定要查询30天内的预约吗?')){
    axios.get(BASE_URL+'/v1/schedules/searchLastMonth/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
      }
    })
  }
}

const del=(i,schedule)=>{
  if (confirm('您确定要删除该班次吗?')){
    axios.post(BASE_URL+'/v1/schedules/'+schedule.id+'/delete').then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('删除完成!');
        getSchedule(currentPage.value);
      }
    })
  }
}

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getSchedule(val);
}
const currentPage = ref(1)
const total = ref()
</script>

<template>
  <el-card style="height: 75px;width: 1645px" >
    <el-container >
      <el-row style="width: 100%;height: 100%">

        <el-col :span="5" style="padding-top:5px ;margin: 0 auto">
          <span style="text-align: left">医护姓名</span>
          <el-input v-model="userName" style="width: 200px; margin-left: 5px" placeholder="请输入医生的名字"></el-input>
        </el-col>


        <el-col :span="12">
          <el-row style="padding-top: 5px">
            <el-col :span="3"><div style="color: gray;line-height: 30px">创建时间</div></el-col>
            <el-col :span="2"><el-button @click="searchToday()" class="headerButton">今天</el-button></el-col>
            <el-col :span="3"><el-button @click="searchLastWeek()" class="headerButton">最近7天</el-button></el-col>
            <el-col :span="3"><el-button @click="searchLastMonth()" class="headerButton">最近1个月</el-button></el-col>
          </el-row>
        </el-col>

        <el-col :span="6">
          <el-row >
            <el-button type="success" @click="getScheduleByNickname()">搜索</el-button>
            <el-button type="primary" @click="router.push('/newSchedule')">新增排班</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-container>
  </el-card>

  <el-card style="margin-top:10px ;width: 1645px;height: 813px" >
    <el-table :data="tableData" style="width: 100%;text-align: left">
      <el-table-column width="50">
        <el-checkbox label="" size="large"></el-checkbox>
      </el-table-column>
      <el-table-column type="index" label="序号" width="100"/>
      <el-table-column prop="doctorUsername" label="医护编号" width="200"/>
      <el-table-column prop="doctorNickname" label="姓名" width="140"/>
      <el-table-column prop="duties" label="职务" width="85"/>
      <el-table-column prop="departmentName" label="所属科室" width="110"/>
      <el-table-column prop="createDate" label="日期" width="170"/>
      <el-table-column prop="dutyShift" label="排班班次" width="210"/>
      <el-table-column prop="startTime" label="开始时间" width="130"/>
      <el-table-column prop="endTime" label="结束时间" width="190"/>
      <el-table-column prop="operate" label="操作" width="150">
        <template #default="scope">
        <el-button type="primary" class="tableButton">编辑</el-button>
        <el-button type="success" class="tableButton">查看</el-button>
        <el-button type="danger" class="tableButton" @click="del(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="divPagination">
      <el-pagination
          v-model:current-page="currentPage"
          layout="prev, pager, next, jumper"
          :total="total*10"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

</template>

<style scoped>
.tableButton{
  height: 20px ;width: 20px
}
.headerButton{
  border: none;
  line-height: 1px;
}
.headerButton:hover{
  background-color: white;
}
.headerButton:focus{
  background-color: white;
}
.divPagination{
  margin-left: 1300px;
  margin-top: 20px
}
</style>